<template>
    <div class="container committee-container">
        <system-nav name="组织关系管理">
            <template #addBtn>
                <p> 
                    <Button type="primary" @click="gotoAdd">添加</Button>
                </p>
            </template>
        </system-nav>
        <div class="inner">
            <div class="tool-bar">
                <Form  class="search-bar" ref="searchForm" :model="searchForm" :label-width="75" :inline="true">
                    <FormItem label="组织名称："> 
                        <Input class="search-input" type="text" v-model.trim="searchForm.searchText" clearable 
                            @on-clear="handleSearch" @keydown.enter.native.prevent="handleSearch" placeholder="请输入组织名称">
                        </Input>
                        <Button class="search-btn" type="primary" @click="handleSearch">查询</Button>
                    </FormItem>
                </Form>    
            </div>
            <Table :columns="columns" :data="data" @on-row-dblclick="gotoDetail">
                <template slot-scope="{ row }" slot="createTime">
                    {{ row.createTime | formatDate }}
                </template>
                <template slot-scope="{ row }" slot="action">
                    <div class="action-btns">
                        <Button type="text" size="small" @click="gotoDetail(row)">查看</Button>
                        <Button type="text" size="small" @click="gotoEdit(row)">编辑</Button>
                        <Button type="text" size="small" @click="remove(row)">删除</Button>
                    </div>
                </template>
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="total" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts"
                        show-total show-elevator show-sizer
                        @on-change="changePage" @on-page-size-change="changePageSize">
                    </Page>
                </div>
            </div>
        </div>              
    </div>
</template>

<script>
import SystemNav from '@/components/SystemNav'
import { getPartyListRest, deletePartyRest } from '@/common/apis/system'
import mixin from '@/mixins'

export default {
    name: 'committee',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        return {
            searchForm: {
                searchText: ''
            },
            columns: [
                {
                    title: '党组织名称',
                    key: 'deptName'
                },
                {
                    title: '上级党组织',
                    key: 'fdeptName',
                    tooltip: true
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    sortable: true,
                    sortType: 'desc',
                    slot: 'createTime'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 175,
                    slot: 'action'
                }
            ],
            data: []
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            const params = {
                pageNo: this.current,
                pageSize: this.pageSize
            }
            if (this.searchForm.searchText) {
                params.params = this.searchForm.searchText
            }
            getPartyListRest(params).then(result => {
                const data = result.data.content.list || []
                this.data = data.map(item => {
                    // eslint-disable-next-line
                    const { children, ...other } = item
                    return other
                })
            })
        },
        handleSearch() {
            this.current = 1
            this.initData()
        },
        gotoAdd() {
            this.$router.push('/committee/add')
        },
        gotoDetail(record) {
            this.$router.push('/committee/detail/' + record.id)
        },
        gotoEdit(record) {
            this.$router.push('/committee/edit/' + record.id)
        },
        remove(record) {
            this.$Modal.confirm({
                title: '提示',
                content: '你确定删除当前记录吗？',
                onOk: () => {
                    deletePartyRest(record.id).then(() => {
                        this.initData()
                        this.$Message.success({
                            background: true,
                            content: '删除成功'
                        })
                    })
                },
                onCancel: () => {}
            })
        }
    }
}
</script>